<template>
    <div>
        <div style="border:1px solid #DCDFE6;border-top:0;width:45%;float: left">
            <el-divider content-position="left">未划分设备</el-divider>
            <div style="padding: 5px;">
                <div style="text-align: center;margin-bottom: 20px">
                    <el-input v-model="key1" placeholder="请输入查询内容" style="width: 40%;margin-right: 20px;"></el-input>
                    <el-button @click="searchKey('1')">查询</el-button>
                </div>
                <el-table
                        :data="tableDataLeft"
                        border
                        stripe
                        style="width: 100%" height="400"
                        ref="divisionRightList"
                        @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="deviceName" align="center" label="设备名称"></el-table-column>
                    <el-table-column prop="deviceCode" align="center" label="IMEI"></el-table-column>
                    <el-table-column prop="orgFullName" align="center" label="组织机构"></el-table-column>
                    <!--<el-table-column prop="deviceTypeName" align="center" width="100" label="设备种类"></el-table-column>-->
                </el-table>
                <div class="pagination" style="margin-top: 5px;">
                    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="cur_page_left" layout="prev, pager, next" :total="page_total_left" :page-size="page_size">
                    </el-pagination>
                </div>
            </div>

        </div>
        <div style="width:8%;float: left;text-align: center;margin-top: 14.5%">
            <div style="margin-bottom: 30px">
                <el-button icon="el-icon-right" circle @click="divisionRight"></el-button>
            </div>
            <div>
                <el-button icon="el-icon-back" circle @click="divisionLeft"></el-button>
            </div>
        </div>
        <div style="border:1px solid #DCDFE6;border-top:0;width:45%;display:inline-block;">
            <el-divider content-position="left">已划分设备</el-divider>
            <div style="padding: 5px;">
                <div style="text-align: center;margin-bottom: 20px">
                    <el-input v-model="key2" placeholder="请输入查询内容" style="width: 40%;margin-right: 20px;"></el-input>
                    <el-button  @click="searchKey('2')">查询</el-button>
                </div>
                <el-table
                        :data="tableData"
                        border  stripe
                        style="width: 100%" height="400"
                        ref="divisionLeftList"
                        @selection-change="handleSelectionChangeLeft">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="deviceName" align="center" label="设备名称"></el-table-column>
                    <el-table-column prop="deviceCode" align="center" label="IMEI"></el-table-column>
                    <el-table-column prop="orgFullName" align="center" label="组织机构"></el-table-column>
                    <!--<el-table-column prop="deviceTypeName" align="center" width="100" label="设备种类"></el-table-column>-->
                </el-table>
                <div class="pagination" style="margin-top: 5px;">
                    <el-pagination background @current-change="handleCurrentChangeLeft" :current-page.sync="cur_page"  layout="prev, pager, next" :total="page_total" :page-size="page_size">
                    </el-pagination>
                </div>
            </div>

        </div>
    </div>


</template>

<script>
    import { getSelectGroupList,batchAllocateDeviceToDeviceGroup,batchRemoveDeviceFromDeviceGroup,
        queryDeviceNotAllocatedToUser,batchAllocateDeviceToUser,batchRemoveDeviceFromUser} from '../../../api/index';
    export default {
        name: "equipmentDivision",
        props:['parentData','isShowDivision'],
        data(){
            return {
                key1:'',
                key2:'',
                tableData: [],
                tableDataLeft:[],
                page_size:10,
                page_total:1,
                page_total_left:1,
                cur_page:1,
                cur_page_left:1,
                divisionRightList:[],
                divisionLeftList:[],
            }
        },
        created(){
            //根据当前信息的不同角色调取不同的接口
            if(this.parentData[0].roleValue == 4){
                this.getSelectedData();
                this.getNoSelectData();
            }
            if(this.parentData[0].roleValue == 8){
                this.getSelectDataByUser();
                this.getNoSelectDataByUser();
            }
            console.log(this.parentData)
        },
        watch:{
            isShowDivision:function (val) {
                if(val){
                    if(this.parentData[0].roleValue == 4){
                        this.getSelectedData();
                        this.getNoSelectData();
                    }
                    if(this.parentData[0].roleValue == 8){
                        this.getSelectDataByUser();
                        this.getNoSelectDataByUser();
                    }
                }
            }
        },
        methods:{
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page_left = val;
                // this.getNoSelectData()
                if(this.parentData[0].roleValue == 4){
                    this.getNoSelectData();
                }
                if(this.parentData[0].roleValue == 8){
                    this.getNoSelectDataByUser();
                }

            },
            handleCurrentChangeLeft(val){
                this.cur_page = val;
                if(this.parentData[0].roleValue == 4){
                    this.getSelectedData();
                }
                if(this.parentData[0].roleValue == 8){
                    this.getSelectDataByUser();
                }

            },
            getSelectedData(){
                getSelectGroupList({
                    pageNum:this.cur_page,
                    pageSize:this.page_size,
                    groupId:this.parentData[0].orgId, //this.parentData[0].id,
                    deviceName:this.key2,
                }).then((res) => {
                    console.log(res)
                    this.tableData = res.list;
                    this.page_total = res.total;

                })
            },
            getSelectDataByUser(){
                queryDeviceNotAllocatedToUser({
                    pageNum:this.cur_page,
                    pageSize:this.page_size,
                    groupId:this.parentData[0].id, //this.parentData[0].id,
                    deviceName:this.key2,
                }).then(res => {
                    this.tableData = res.list;
                    this.page_total = res.total;
                })
            },
            getNoSelectDataByUser(){
                queryDeviceNotAllocatedToUser({
                    pageNum:this.cur_page_left,
                    pageSize:this.page_size,
                    deviceName:this.key1
                }).then(res => {
                    this.tableDataLeft = res.list;
                    this.page_total_left = res.total;
                })
            },
            getNoSelectData(){
                getSelectGroupList({
                    pageNum:this.cur_page_left,
                    pageSize:this.page_size,
                    deviceName:this.key1
                    // groupId:-1,
                }).then((res) => {
                    console.log(res)
                    this.tableDataLeft = res.list;
                    this.page_total_left = res.total;

                })
            },
            divisionRight(){
                console.log(this.divisionRightList)
                if(this.divisionRightList.length<=0){
                    this.$message.error('请选择要划分的设备')
                    return ;
                }
                var ids = this.divisionRightList.map((val)=>{
                    return val.deviceId ;
                })
                if(this.parentData[0].roleValue == 4){
                    // {id:this.parentData[0].id,ids:ids}
                    batchAllocateDeviceToDeviceGroup({
                        id:this.parentData[0].orgId,
                        ids:ids
                    }).then((res)=>{
                        if(res.success){
                            this.$message.success(res.message);
                            this.cur_page_left = 1;
                            this.cur_page = 1;
                            this.getSelectedData();
                            this.getNoSelectData();
                        }else{
                            this.$message.error(res.message);
                        }
                    })
                }
                if(this.parentData[0].roleValue == 8){
                    // {id:this.parentData[0].id,ids:ids}
                    batchAllocateDeviceToUser({
                        id:this.parentData[0].id,
                        ids:ids
                    }).then((res)=>{
                        if(res.success){
                            this.$message.success(res.message);
                            this.cur_page_left = 1;
                            this.cur_page = 1;
                            this.getSelectDataByUser();
                            this.getNoSelectDataByUser();
                        }else{
                            this.$message.error(res.message);
                        }
                    })
                }
            },
            divisionLeft(){
                console.log(this.divisionLeftList)
                if(this.divisionLeftList.length<=0){
                    this.$message.error('请选择要划分的设备')
                    return ;
                }
               var ids = this.divisionLeftList.map((val)=>{
                    return val.deviceId ;
                })
                if(this.parentData[0].roleValue == 4){
                    batchRemoveDeviceFromDeviceGroup({ids:ids}).then((res)=>{
                        if(res.success){
                            this.$message.success(res.message);
                            this.cur_page_left = 1;
                            this.cur_page = 1;
                            this.getSelectedData();
                            this.getNoSelectData();
                        }else{
                            this.$message.error(res.message);
                        }
                    })
                }
                if(this.parentData[0].roleValue == 8){
                    batchRemoveDeviceFromUser({
                    ids:ids
                    }).then((res)=>{
                        if(res.success){
                            this.$message.success(res.message);
                            this.cur_page_left = 1;
                            this.cur_page = 1;
                            this.getSelectDataByUser();
                            this.getNoSelectDataByUser();
                        }else{
                            this.$message.error(res.message);
                        }
                    })
                }
            },
            handleSelectionChange(val){
                this.divisionRightList = val;

            },
            handleSelectionChangeLeft(val){
                this.divisionLeftList = val;

            },
            searchKey(type){
                if(type == 1){//未划分设备搜索
                    this.cur_page_left = 1;
                    if(this.parentData[0].roleValue == 4){
                        this.getNoSelectData();
                    }
                    if(this.parentData[0].roleValue == 8){
                        this.getNoSelectDataByUser();
                    }
                }else{
                    this.cur_page = 1;
                    if(this.parentData[0].roleValue == 4){
                        this.getSelectedData();
                    }
                    if(this.parentData[0].roleValue == 8){
                        this.getSelectDataByUser();
                    }
                }
            }
        }
    }
</script>

<style scoped>
    /deep/ .el-divider--horizontal{
        margin: 0 0 24px;
    }
</style>